<{include file="top.html"}>
<link rel="stylesheet" href="<{$preStaticUrl}>Wap/v2/css/mui.picker.min.css?v=<{$resVersion}>" />
<script src="<{$preStaticUrl}>Wap/v2/js/mui.js"></script>
<script src="<{$preStaticUrl}>Wap/v2/js/mui.picker.min.js"></script>
<script src="<{$preStaticUrl}>Wap/v2/js/city.data-3.js"></script>
<style>
    input[type='time'],input[type='date'],input[type='datetime'], input[type='number'], input[type='email']{
        width: 20rem;
        margin-top: .3rem;
        height: 2rem;
        border: none;
        text-align: right;
        background: #FFF;
        color: #666;
    }
    .multi label{display: inline-block;height: 3rem;line-height: 3rem}
    input[type='checkbox'] {
        content: url(<{$preStaticUrl}>Admin/img/orange_1.png);
        float: right;
        margin-left:0.5rem;
        margin-top:0.6rem;
    }
    input[type=checkbox]:checked,input[type=radio]:checked {
        content:url(<{$preStaticUrl}>Admin/img/orange_2.png);
    }

    .mui-backdrop {
        position: fixed;
        z-index: 998;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: rgba(0, 0, 0, 0.3);
    }
    .mui-dtpicker-title {
        display: none;
    }
    .mui-poppicker-header, .mui-dtpicker-header {
        padding: 0.27rem 0.3rem;
        background: #fff;
    }
    .mui-poppicker-header .mui-btn, .mui-dtpicker-header .mui-btn {
        padding: 0;
        background: none;
        border: 0;
        font-size: 1.6rem;
        color: #ff5685;
    }

    .mui-picker {
        background: #f4f4f4;
    }

    .mui-pciker-rule-ft {
        border: 0;
        background: #E5E5E5;
        z-index: 1;
    }

</style>
</head>
<body>
<div class="xy-panel">
    <div class="xy-panel-top">
        <div class="xy-titlebar">
            <div class="xy-titlebar-title" style="margin: 0 auto">信息填写</div>
            <div class="xy-titlebar-right"></div>
        </div>
    </div>
    <div class="xy-panel-content" style="bottom:0;padding:1rem 0;top:4rem">
        <div class="xy-row vDirectionRow">
            <form id="tab_mo_2" >
                <input type="hidden" name="fid" value="<{$fid}>" />
                <dl class="Annotate">注：加*号为必填项</dl>
                <ul class="con_ui-list integrate_ui-list">

                    <{foreach from=$params item=item key=key}>

                                <{if $item.ftype eq $FIELD_TEXT}>
                                <li class="ui-list">
                                    <i><{if $item.must eq 1}><span style="color:red">*</span><{/if}><{$item.fname}>:</i>
                                    <span>
                                        <input type="text" name="f<{$key}>" placeholder="<{$item.append}>" value="<{$data[$key]}>"  />
                                    </span>
                                 </li>
                                <{else if $item.ftype eq $FIELD_LONGTEXT}>
                                </ul>
                                <ul class="con_ui-list integrate_ui-list">
                                        <li class="ui-list">
                                            <i><{if $item.must eq 1}><span style="color:red">*</span><{/if}><{$item.fname}>:</i>
                                        </li>
                                        <li class="address_Newbox">
                                            <i class="addressArea"><textarea name="f<{$key}>"><{$data[$key]}></textarea></i>
                                        </li>
                                </ul>
                                <ul class="con_ui-list integrate_ui-list">
                                <{else if $item.ftype eq $FIELD_NUM}>
                                <li class="ui-list">
                                    <i><{if $item.must eq 1}><span style="color:red">*</span><{/if}><{$item.fname}>:</i>
                                    <span>
                                        <input type="number" name="f<{$key}>" placeholder="<{$item.append}>" value="<{$data[$key]}>"  />
                                    </span>
                                </li>
                                <{else if $item.ftype eq $FIELD_DATE_PAST}>
                                <li class="ui-list">
                                    <i><{if $item.must eq 1}><span style="color:red">*</span><{/if}><{$item.fname}>:</i>
                                    <span>
                                        <input type="text" class="date past" name="f<{$key}>" placeholder="<{$item.append}>" value="<{$data[$key]}>"  readonly />
                                    </span>
                                </li>
                                <{else if $item.ftype eq $FIELD_DATE_FUTURE}>
                                    <li class="ui-list">
                                        <i><{if $item.must eq 1}><span style="color:red">*</span><{/if}><{$item.fname}>:</i>
                                    <span>
                                        <input type="text" class="date future" name="f<{$key}>" placeholder="<{$item.append}>" value="<{$data[$key]}>"  readonly />
                                    </span>
                                    </li>
                                <{else if $item.ftype eq $FIELD_TIME}>
                                <li class="ui-list">
                                    <i><{if $item.must eq 1}><span style="color:red">*</span><{/if}><{$item.fname}>:</i>
                                    <span>
                                        <input type="text" class="time" name="f<{$key}>" placeholder="<{$item.append}>" value="<{$data[$key]}>"  readonly/>
                                    </span>
                                </li>
                                 <{else if $item.ftype eq $FIELD_PHOTO}>



                                 <{else if $item.ftype eq $FIELD_SINGLE}>
                                <li class="ui-list">
                                    <i><{if $item.must eq 1}><span style="color:red">*</span><{/if}><{$item.fname}>:</i>
                                    <span>
                                        <select  name="f<{$key}>"  style="height: 2.5rem;">
                                            <{html_options values=explode("\r\n",$item.fparam) output=explode("\r\n",$item.fparam) selected=$data[$key] }>
                                        </select>
                                    </span>
                                </li>


                                 <{else if $item.ftype eq $FIELD_MULTI}>
                                <li class="ui-list">
                                    <i><{if $item.must eq 1}><span style="color:red">*</span><{/if}><{$item.fname}>:</i>
                                    <span class="multi mui-checkbox">
                                        <{html_checkboxes name="f$key" values=explode("\r\n",$item.fparam) output=explode("\r\n",$item.fparam) selected=explode(',',$data[$key])  separator='<br />'}>
                                    </span>
                                </li>

                                 <{else if $item.ftype eq $FIELD_PHONE}>
                                <li class="ui-list">
                                    <i><{if $item.must eq 1}><span style="color:red">*</span><{/if}><{$item.fname}>:</i>
                                    <span>
                                        <input type="tel" name="f<{$key}>" placeholder="<{$item.append}>" value="<{$data[$key]}>"  />
                                    </span>
                                </li>

                                 <{else if $item.ftype eq $FIELD_EMAIL}>
                                <li class="ui-list">
                                    <i><{if $item.must eq 1}><span style="color:red">*</span><{/if}><{$item.fname}>:</i>
                                    <span>
                                        <input type="email" name="f<{$key}>" placeholder="<{$item.append}>" value="<{$data[$key]}>"  />
                                    </span>
                                </li>
                                    <{else if $item.ftype eq $FIELD_AREA}>
                                    <li class="ui-list">
                                        <i><{if $item.must eq 1}><span style="color:red">*</span><{/if}><{$item.fname}>:</i>
                                    <span>
                                        <input type="text" name="f<{$key}>" class="area" placeholder="<{$item.append}>" value="<{$data[$key]}>"  readonly/>
                                    </span>
                                    </li>
                                    <{/if}>

                    <{/foreach}>





                    <!--<li class="ui-list">-->
                        <!--<i><span style="color:red">*</span>联系电话：</i>-->
                        <!--<span><input type="tel" name="phone" placeholder="请输入联系电话" value="<{$babyInfo['phone']}>" required /></span>-->
                    <!--</li>-->
                    <!--<li class="ui-list">-->
                        <!--<i><span style="color:red">*</span>家庭成员数：</i>-->
                        <!--<span><input type="tel" name="people" min="1"  value="<{$babyInfo['people']}>" required /></span>-->
                    <!--</li>-->
                    <!--<li class="ui-list">-->
                        <!--<i><span style="color:red">*</span>小孩数量(16周岁以下)：</i>-->
                        <!--<span><input type="tel" name="babyNum" min="1"   value="<{$babyInfo['babyNum']}>" required /></span>-->
                    <!--</li>-->
                    <!--<li class="ui-list">-->
                        <!--<i><span style="color:red">*</span>申请人职业：</i>-->
                        <!--<span><input type="text" name="job"  value="<{$babyInfo['job']}>" required /></span>-->
                    <!--</li>-->
                    <!--<li class="ui-list">-->
                        <!--<i><span style="color:red">*</span>所在地区：</i>-->
                        <!--<span>-->
                            <!--<select  name="area"  style="height: 2.5rem;">-->
                                <!--<option <{if $babyInfo['area'] eq '海曙' }>selected<{/if}> > 海曙</option>-->
                                <!--<option <{if $babyInfo['area'] eq '江北' }>selected<{/if}> > 江北</option>-->
                                <!--<option <{if $babyInfo['area'] eq '鄞州' }>selected<{/if}> > 鄞州</option>-->
                                <!--<option <{if $babyInfo['area'] eq '奉化' }>selected<{/if}> > 奉化</option>-->
                                <!--<option <{if $babyInfo['area'] eq '镇海' }>selected<{/if}> > 镇海</option>-->
                                <!--<option <{if $babyInfo['area'] eq '北仑' }>selected<{/if}> > 北仑</option>-->
                            <!--</select>-->

                        <!--</span>-->
                    <!--</li>-->
                    <!--<li class="ui-list">-->
                        <!--<i><span style="color:red">*</span>领养意向：</i>-->
                        <!--<span>-->
                            <!--<select  name="pet"  style="height: 2.5rem;">-->
                                <!--<option <{if $babyInfo['pet'] eq '猫 01' }>selected<{/if}> > 猫 01</option>-->
                                <!--<option <{if $babyInfo['pet'] eq '猫 02' }>selected<{/if}> > 猫 02</option>-->
                                <!--<option <{if $babyInfo['pet'] eq '狗 01' }>selected<{/if}> > 狗 01</option>-->
                                <!--<option <{if $babyInfo['pet'] eq '狗 02' }>selected<{/if}> > 狗 02</option>-->
                                <!--<option <{if $babyInfo['pet'] eq '狗 03' }>selected<{/if}> > 狗 03</option>-->
                                <!--<option <{if $babyInfo['pet'] eq '狗 04' }>selected<{/if}> > 狗 04</option>-->
                                <!--<option <{if $babyInfo['pet'] eq '狗 05' }>selected<{/if}> > 狗 05</option>-->
                                <!--<option <{if $babyInfo['pet'] eq '狗 06' }>selected<{/if}> > 狗 06</option>-->
                                <!--<option <{if $babyInfo['pet'] eq '狗 07' }>selected<{/if}> > 狗 07</option>-->
                            <!--</select>-->
                        <!--</span>-->
                    <!--</li>-->


                </ul>

                <div class="ui-button ui-button-2">
                    <a href="javascript:void(0);" onclick="submitInfo()">提交信息</a>
                </div>
            </form>

        </div>
    </div>
</div>


</body>
</html>

<script>
//    mui.init({
//        gestureConfig:{
//            tap: false, //默认为true
//            doubletap: false, //默认为false
//            longtap: false, //默认为false
//        }
//    });


    function submitInfo(){
        var param = $("#tab_mo_2").serialize();
        $.post('',param,function(res){
            layer.msg(res.msg);
        });
    }



    //日期选择
    $(".date").click(function(){
        var _self = this;

        var birthValue = $(_self).val();
        if(_self.picker) {
            _self.picker.show(function (rs) {
                $(_self).val(rs.value)
                $(_self).text(rs.y.value+"-"+parseInt(rs.m.value)+"-"+parseInt(rs.d.value))
                _self.picker.dispose();
                _self.picker = null;
            });
        } else {
            var type,beginDate,endDate;
            if($(_self).hasClass('past')){
                type='date';
                beginDate=new Date(1900, 01, 01);
                endDate=new Date();
            }else if($(_self).hasClass('future')){
                type='date';
                beginDate=new Date();
                endDate=new Date(2050, 01, 01);
            }

            _self.picker = new mui.DtPicker({
                type: type,
                value: birthValue,
                beginDate: beginDate,
                endDate: endDate
            })
            _self.picker.show(function(rs) {
                $(_self).val(rs.value)
                $(_self).text(rs.y.value+"-"+parseInt(rs.m.value)+"-"+parseInt(rs.d.value))
                _self.picker.dispose();
                _self.picker = null;
            });
        }
    })
    //时间选择
    $(".time").click(function(){
        var _self = this;
        var birthValue = $(_self).val();
        if(_self.picker) {
            _self.picker.show(function (rs) {
                $(_self).val(rs.value)
                $(_self).text(rs.h.value+"-"+parseInt(rs.i.value))
                _self.picker.dispose();
                _self.picker = null;
            });
        } else {
            _self.picker = new mui.DtPicker({
                type: 'time',
                value: birthValue,
            })
            _self.picker.show(function(rs) {
                $(_self).val(rs.value)
                $(_self).text(rs.h.value+"-"+parseInt(rs.i.value))
                _self.picker.dispose();
                _self.picker = null;
            });
        }
    })


    //区域选择
    var cityPicker = new mui.PopPicker({
        layer: 3
    });

    cityPicker.setData(cityData3);

//    var area = $("input[name='area']").val().split('/')
//
//    for(var i=0;i<cityData3.length;i++){
//        if(cityData3[i].value==area[0]){
//            cityPicker.pickers[0].setSelectedIndex(i)
//            var level2 = cityData3[i].children
//            for(var j=0;j<level2.length;j++){
//                if(level2[j].value==area[1]){
//                    cityPicker.pickers[1].setSelectedIndex(j)
//                    var level3 = level2[j].children
//                    if(level3){
//                        for(var k=0;k<level3.length;k++){
//                            if(level3[k].value==area[2]){
//                                cityPicker.pickers[2].setSelectedIndex(k)
//                                break
//                            }
//                        }
//                    }
//                    break
//                }
//            }
//            break
//        }
//    }

    var _getParam = function(obj, param) {
        return obj[param] || '';
    };
    $(".area").click(function(){
        var _self = this;
        cityPicker.show(function(items) {
            var text = _getParam(items[0], 'text') + "/" + _getParam(items[1], 'text') + "/" + _getParam(items[2], 'text');
            $(_self).val(text);

        });
    })




</script>